<script setup lang="ts">
import { setup } from "@/utils/setup.js";
import { cardProps, NCard } from "naive-ui";
import { computed } from "vue";

const props = defineProps({
  id: String,
} as typeof cardProps & { id: StringConstructor });

const { route } = setup();
const borderColor = computed(() => {
  return route.hash === `#${props.id}`
    ? "var(--n-color-target)"
    : "var(--n-border-color)";
});
</script>

<template>
  <NCard :id="props.id" :style="{ borderColor }">
    <template v-for="(_, key) in $slots" #[key]>
      <slot :name="key"></slot>
    </template>
  </NCard>
</template>
